import React, { useState, useMemo } from 'react';
import { Row, Col, Drawer } from 'antd';
import styles from './index.less';
import EmptyCenter from '@/components/EmptyCenter';
import useMessageModel from '../../useMessageModel';
import { useUpdateEffect } from '@umijs/hooks';
import classnames from 'classnames';
import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons';

const MessageDrawer = () => {
  const { visible, setVisible } = useMessageModel(model => [model.visible]);

  const onClose = () => {};

  return (
    <Drawer
      title="流程列表"
      width={'100%'}
      placement="bottom"
      closable={false}
      height={420}
      onClose={onClose}
      className={styles['drawer-wrap']}
      visible={visible}
      mask={false}
      getContainer={() => document.getElementById('test-wrap')}
      handler={
        <div className={classnames(styles['handle'])} onClick={() => setVisible(!visible)}>
          {visible ? (
            <DoubleRightOutlined className={styles['close-handle']} />
          ) : (
            <DoubleLeftOutlined className={styles['open-handle']} />
          )}
        </div>
      }
      style={{
        zIndex: 999,
        position: 'absolute',
        left: '-20px',
      }}
    >
      1
    </Drawer>
  );
};

const Page = props => {
  return (
    <div>
      <MessageDrawer />
    </div>
  );
};

export default Page;
